<!DOCTYPE HTML>
<html>

	<head>
		<title>蔡晓儿的个人简历-Bootstrap</title>
		<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="js/jquery.min.js"></script>
		<!-- Custom Theme files -->
		<link href="css/style.css" rel='stylesheet' type='text/css' />
		<!-- Custom Theme files -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<!-- webfonts -->
		<link href='//fonts.googleapis.com/css?family=Asap:400,700,400italic' rel='stylesheet' type='text/css'>
		<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
		<!-- webfonts -->
		<!---- start-smoth-scrolling---->
		<script type="text/javascript" src="js/move-top.js"></script>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event) {
					event.preventDefault();
					$('html,body').animate({
						scrollTop: $(this.hash).offset().top
					}, 1000);
				});
			});
		</script>
		<!---- start-smoth-scrolling---->
	</head>

	<body>
		<!-- container -->
		<!-- header -->
		<div id="home" class="header">
			<div class="container">
				<!-- top-hedader -->
				<div class="top-header">
					<!-- /logo -->
					<!--top-nav---->
					<div class="top-nav">
						<div class="navigation">
							<div class="logo">
								<h1><a href="index.html"><span>B</span>Beta 喵</a></h1>
							</div>
							<div class="navigation-right">
								<span class="menu"><img src="images/menu.png" alt=" " /></span>
								<nav class="link-effect-3" id="link-effect-3">
									<ul class="nav1 nav nav-wil">
										<li class="active">
											<a href="index.html">首页</a>
										</li>
										<li>
											<a class="scroll" href="#about">关于我</a>
										</li>
										<li>
											<a class="scroll" href="#services">专业技能</a>
										</li>
										<li>
											<a class="scroll" href="#work">经历</a>
										</li>
										<li>
											<a class="scroll" href="#port">项目</a>
										</li>
										<li>
											<a class="scroll" href="#blogs">博客</a>
										</li>
										<li>
											<a class="scroll" href="#contact">联系方式</a>
										</li>
									</ul>
								</nav>
								<!-- script-for-menu -->
								<script>
									$("span.menu").click(function() {
										$("ul.nav1").slideToggle(300, function() {
											// Animation complete.
										});
									});
								</script>
								<!-- /script-for-menu -->
							</div>
							<div class="clearfix"></div>
						</div>
						<!-- /top-hedader -->
					</div>
					<div class="banner-info">
						<div class="col-md-7 header-right">
							<h1>你好 !</h1>
							<h6>前端 & UI 设计</h6>
							<ul class="address">

								<li>
									<ul class="address-text">
										<li><b>姓名</b></li>
										<li>蔡晓儿</li>
									</ul>
								</li>
								<li>
									<ul class="address-text">
										<li><b>生日</b></li>
										<li>1996-05-25</li>
									</ul>
								</li>
								<li>
									<ul class="address-text">
										<li><b>电话 </b></li>
										<li>132-4759-7486</li>
									</ul>
								</li>
								<li>
									<ul class="address-text">
										<li><b>地址 </b></li>
										<li>广东省广州市黄埔区广州商学院信息技术与工程学院</li>
									</ul>
								</li>
								<li>
									<ul class="address-text">
										<li><b>E-MAIL </b></li>
										<li>
											<a href="#"> 2417566928@qq.com</a>
										</li>
									</ul>
								</li>
								<li>
									<ul class="address-text">
										<li><b>WEBSITE </b></li>
										<li>
											<a href="#">www.caixiaoer.me</a>
										</li>
									</ul>
								</li>

							</ul>
						</div>
						<div class="col-md-5 header-left">
							<img src="images/img11.jpg" alt="">
						</div>
						<div class="clearfix"> </div>

					</div>
				</div>
			</div>
		</div>
		<!-- /header -->
		<!-- about -->
		<div id="about" class="about">
			<div class="col-md-6 about-left">
				<div id="owl-demo1" class="owl-carousel owl-carousel2">
					<div class="item">
						<div class="about-left-grid">
							<h2>你好! 我是<span>蔡晓儿</span></h2>
							<p>我是2015级网络工程nsectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis.</p>
							<ul>
								<li>
									<a class="a-btn-a scroll" href="#port">我的项目</a>
								</li>
								<li>
									<a class="a-btn-h scroll" href="#contact">联系我</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="item">
						<div class="about-left-grid">
							<h2>你好! 我是<span>蔡晓儿</span></h2>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis.</p>
							<ul>
								<li>
									<a class="a-btn-a scroll" href="#port">我的项目</a>
								</li>
								<li>
									<a class="a-btn-h scroll" href="#contact">联系我</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="item">
						<div class="about-left-grid">
							<h2>你好! 我是 <span>蔡晓儿</span></h2>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis.</p>
							<ul>
								<li>
									<a class="a-btn-a scroll" href="#port">我的项目</a>
								</li>
								<li>
									<a class="a-btn-h scroll" href="#contact">联系我</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-6 about-right">

			</div>
			<div class="clearfix"> </div>
			<link href="css/owl.carousel.css" rel="stylesheet">
			<script src="js/owl.carousel.js"></script>
			<script>
				$(document).ready(function() {
					$("#owl-demo1").owlCarousel({
						items: 1,
						lazyLoad: false,
						autoPlay: true,
						navigation: false,
						navigationText: false,
						pagination: true,
					});
				});
			</script>
			<!-- Feedback -->
			<script>
				$(document).ready(function() {
					$("#owl-demo3").owlCarousel({
						items: 1,
						lazyLoad: false,
						autoPlay: true,
						navigation: false,
						navigationText: true,
						pagination: true,
					});
				});
			</script>
		</div>
		<!-- /about -->
		<!-- services -->
		<div id="services" class="services">
			<div class="container">
				<div class="service-head one text-center ">
					<h4>WHAT I DO</h4>
					<h3>我的 <span>专业技能</span></h3>
					<span class="border two"></span>
				</div>
				<!-- services-grids -->
				<div class="wthree_about_right_grids w3l-agile">
					<div class="container">
						<div class="row">
							<div class="col-md-offset-3 col-md-6">
								<h3 style="color:#00A78E;">HTML5/CSS3</h3>
								<div class="progress">
									<div class="progress-bar" style="width:90%; background:#97c513;">
										<div class="progress-value">90%</div>
									</div>
								</div>

								<h3 style="color:#00A78E;">JAVA</h3>
								<div class="progress">
									<div class="progress-bar" style="width:70%; background:#f2545b;">
										<div class="progress-value">70%</div>
									</div>
								</div>

								<h3 style="color:#00A78E;">J-Query</h3>
								<div class="progress">
									<div class="progress-bar" style="width:55%; background:#ffc304;">
										<div class="progress-value">55%</div>
									</div>
								</div>

								<h3 style="color:#00A78E;">Bootstrap</h3>
								<div class="progress">
									<div class="progress-bar" style="width:80%; background:#2e9dc2;">
										<div class="progress-value">80%</div>
									</div>
								</div>
								<h3 style="color:#00A78E;">Photoshop</h3>
								<div class="progress">
									<div class="progress-bar" style="width:60%; background:#285E8E;">
										<div class="progress-value">60%</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- services-grids -->
			</div>
		</div>
		<!-- services -->
		<!--work-experience-->
		<div id="work" class="work">
			<div class="container">
				<div class="service-head text-center">
					<h4>WHAT I DID</h4>
					<h3>我的 <span>个人经历</span></h3>
					<span class="border one"></span>
				</div>
				<div class="time-main w3l-agile">
					<div class="col-md-6 year-info">
						<ul class="year">
							<li>2017</li>
							<li>2016</li>
							<li>2015</li>
							<div class="clearfix"></div>
						</ul>
					</div>
					<ul class="col-md-6 timeline">
						<li>
							<div class="timeline-badge info"><i class="glyphicon glyphicon-briefcase"></i></div>
							<div class="timeline-panel">
								<div class="timeline-heading">
									<h4 class="timeline-title">中国大学生服务外包创新创业比赛二等奖</h4>
								</div>
								<div class="timeline-body">
									<p>中国-无锡 | 2017.Sep.13~15</p>
									<p>“随手快递”App平台系统——广州商学院皮皮虾队  我负责手机UI界面的实现；制定解决方案与技术路线；还有后台管理系统界面代码代码实现；负责后台系统功能代码实现***********； </p>
								</div>
							</div>
						</li>

						<li>
							<div class="timeline-badge primary"><i class="glyphicon glyphicon-briefcase"></i></div>
							<div class="timeline-panel">
								<div class="timeline-heading">
									<h4 class="timeline-title">软考-中级网络工程师</h4>
								</div>
								<div class="timeline-body">
									<p>2016下半年计算机技术与软件专业技术资格（水平）********************</p>
									<!--<p>Lorem ipsum dolor sit amet.Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus </p>-->
								</div>
							</div>
						</li>

						<li>
							<div class="timeline-badge danger"><i class="glyphicon glyphicon-briefcase"></i></div>
							<div class="timeline-panel">
								<div class="timeline-heading">
									<h4 class="timeline-title">广州商学院</h4>
								</div>
								<div class="timeline-body">
									<p>2015-2019</p>
									<p>信息技术与工程学院-计算机科学与技术 </p>
								</div>
							</div>
						</li>
					</ul>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
		<!--//work-experience-->

		<!-- portfolio -->
		<div class="portfolio" id="port">
			<div class="service-head text-center">
				<h4>MY WORKS</h4>
				<h3>我的 <span>项目</span></h3>
				<span class="border"></span>
			</div>
			<div class="portfolio-grids">
				<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
				<script type="text/javascript">
					$(document).ready(function() {
						$('#horizontalTab').easyResponsiveTabs({
							type: 'default', //Types: default, vertical, accordion           
							width: 'auto', //auto or any width like 600px
							fit: true // 100% fit in a container
						});
					});
				</script>
				<div class="sap_tabs">
					<div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
						<ul class="resp-tabs-list">
							<li class="resp-tab-item" aria-controls="tab_item-0" role="tab"><span>全部</span></li>
							<li class="resp-tab-item" aria-controls="tab_item-1" role="tab"><span>网页设计</span></li>
							<li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span>手机UI</span></li>
							<li class="resp-tab-item" aria-controls="tab_item-3" role="tab"><span>其它</span></li>
						</ul>
						<div class="resp-tabs-container">
							<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0">
								<div class="col-md-3 team-gd ">

									<a href="#portfolioModal1" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic4.jpg" alt="">
									</a>

								</div>
								<div class="col-md-3 team-gd ">

									<a href="#portfolioModal3" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic5.jpg" alt="">
									</a>

								</div>
								<div class="col-md-3 team-gd ">

									<a href="#portfolioModal2" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic9.jpg" alt="">
									</a>

								</div>
								<div class="col-md-3 team-gd ">

									<a href="#portfolioModal4" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic6.jpg" alt="">
									</a>

								</div>
								<div class="col-md-3 team-gd yes_marg ">

									<a href="#portfolioModal5" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic10.jpg" alt="">
									</a>

								</div>
								<div class="col-md-3 team-gd yes_marg ">

									<a href="#portfolioModal6" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic11.jpg" alt="">
									</a>

								</div>
								<div class="col-md-3 team-gd yes_marg ">

									<a href="#portfolioModal7" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic13.jpg" alt="">
									</a>

								</div>
								<div class="col-md-3 team-gd yes_marg ">

									<a href="#portfolioModal8" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic14.jpg" alt="">
									</a>

								</div>
								<div class="clearfix"></div>
							</div>
							<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal5" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic10.jpg" alt="">
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd  ">
									<div class="thumb">
										<a href="#portfolioModal6" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic11.jpg" alt="">
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd ">

									<a href="#portfolioModal7" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic13.jpg" alt="">
									</a>

								</div>
								<div class="clearfix"></div>
							</div>
							<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-2">
								<div class="col-md-3 team-gd ">

									<a href="#portfolioModal2" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic9.jpg" alt="">
									</a>

								</div>
								<div class="col-md-3 team-gd ">

									<a href="#portfolioModal4" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic6.jpg" alt="">
									</a>

								</div>
								<div class="clearfix"></div>
							</div>
							<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-3">
								<div class="col-md-3 team-gd ">
									<a href="#portfolioModal5" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic4.jpg" alt="">
									</a>
								</div>
								<div class="col-md-3 team-gd">
									<a href="#portfolioModal6" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic14.jpg" alt="">
									</a>
								</div>
								<div class="col-md-3 team-gd ">
									<a href="#portfolioModal7" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic5.jpg" alt="">
									</a>
								</div>
								<div class="clearfix"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- //portfolio -->
		<!-- top-grids -->
		<div class="blog" id="blogs">
			<div class="container">
				<div class="service-head text-center">
					<h4>BLOGS</h4>
					<h3>我的 <span>博客</span></h3>
					<span class="border one"></span>
				</div>
				<div class="news-grid w3l-agile">
					<div class="col-md-6 news-img">
						<a href="#" data-toggle="modal" data-target="#myModal1"> <img src="images/b1.jpg" alt=" " class="img-responsive"></a>

					</div>
					<div class="col-md-6 news-text">
						<h3> <a href="#" data-toggle="modal" data-target="#myModal1">网页设计与其让界面扁平不如让信息层级扁平</a></h3>
						<ul class="news">
							<li><i class="glyphicon glyphicon-user"></i>
								<a href="#">Beta喵</a>
							</li>
							<li><i class="glyphicon glyphicon-comment"></i>
								<a href="#">2 Comments</a>
							</li>
							<li><i class="glyphicon glyphicon-heart"></i>
								<a href="#">50 Likes</a>
							</li>
							<li><i class="glyphicon glyphicon-tags"></i>
								<a href="#">3 Tags</a>
							</li>
						</ul>
						<p>如果UI 界面使用了拟物化的风格，看起来跟生活实物一模一样，你一定会有按下去的欲望;而扁平化思想是一种让设计者在界面设计过程中减少信息层级的思想。 当下 UI 设计的扁平化浪潮可谓如日中天，从微软的 Windows 8 开始，还有后来 Google 的 Android，到现在的苹果 iPhone 的 iOS，都采用了扁平化</p>
						<a href="#" data-toggle="modal" data-target="#myModal1" class="read hvr-shutter-in-horizontal">更 多</a>
					</div>

					<div class="clearfix"></div>
				</div>
				<div class="news-grid">

					<div class="col-md-6 news-text two">
						<h3> <a href="#" data-toggle="modal" data-target="#myModal1">HTML5标签元素的下划线动画</a></h3>
						<ul class="news">
							<li><i class="glyphicon glyphicon-user"></i>
								<a href="#">Beta喵</a>
							</li>
							<li><i class="glyphicon glyphicon-comment"></i>
								<a href="#">2 Comments</a>
							</li>
							<li><i class="glyphicon glyphicon-heart"></i>
								<a href="#">50 Likes</a>
							</li>
							<li><i class="glyphicon glyphicon-tags"></i>
								<a href="#">3 Tags</a>
							</li>
						</ul>
						<p>最近我看到一些博客网站又这么一个效果: 当鼠标放到博客头部的标题时,这个链接的下划线就会以动画的方式从无到有,我觉得挺有意思的,好像京东的首页就有这个效果,大家可以看看.创建这个效果非常的简单,不需要加入额外的DOM元素到页面中,但是低版本的浏览器可能不支持CSS动画(常规下可能只显示一条下</p>
						<a href="#" data-toggle="modal" data-target="#myModal1" class="read hvr-shutter-in-horizontal">更 多</a>

					</div>
					<div class="col-md-6 news-img two">
						<a href="#" data-toggle="modal" data-target="#myModal1"> <img src="images/b2.jpg" alt=" " class="img-responsive"></a>

					</div>
					<div class="clearfix"></div>
				</div>
				<div class="news-grid">
					<div class="col-md-6 news-img">
						<a href="#" data-toggle="modal" data-target="#myModal1"> <img src="images/b3.jpg" alt=" " class="img-responsive"></a>

					</div>
					<div class="col-md-6 news-text">
						<h3> <a href="#" data-toggle="modal" data-target="#myModal1">jQuery获取URL请求参数 网址参数</a></h3>
						<ul class="news">
							<li><i class="glyphicon glyphicon-user"></i>
								<a href="#">Beta喵</a>
							</li>
							<li><i class="glyphicon glyphicon-comment"></i>
								<a href="#">2 Comments</a>
							</li>
							<li><i class="glyphicon glyphicon-heart"></i>
								<a href="#">50 Likes</a>
							</li>
							<li><i class="glyphicon glyphicon-tags"></i>
								<a href="#">3 Tags</a>
							</li>
						</ul>
						<p>jQuery获取URL请求参数的方法,涉及jquery针对URL的获取与字符串的操作技巧,具有一定参考借鉴价值,之前小编也整理过一些js获取URL参数的实例，今天　我们来看看一个关于jQuery获取URL请求参数的例子，希望此例子可以对各位有帮助．</p>
						<a href="#" data-toggle="modal" data-target="#myModal1" class="read hvr-shutter-in-horizontal">更 多</a>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
		<!-- top-grids -->
		<!-- /blog-pop-->
		<div class="modal ab fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog about" role="document">
				<div class="modal-content about">
					<div class="modal-header">
						<button type="button" class="close ab" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					</div>
					<div class="modal-body about">
						<div class="about">

							<div class="about-inner">

								<img src="images/b3.jpg" alt="about" />
								<h4 class="tittle">网页设计与其让界面扁平不如让信息层级扁平</h4>
								<p>如果UI 界面使用了拟物化的风格，看起来跟生活实物一模一样，你一定会有按下去的欲望;而扁平化思想是一种让设计者在界面设计过程中减少信息层级的思想。 当下 UI 设计的扁平化浪潮可谓如日中天，从微软的 Windows 8 开始，还有后来 Google 的 Android，到现在的苹果 iPhone 的 iOS，都采用了扁平化的设计理念。可是，你真的理解什么是扁平化吗?这不禁要画上一个大大的问号。 在开篇之前，我先来卖个关子：我更喜欢拟物化的界面风格，和扁平化的设计思想。(请揣摩这句话)很多人眼中的扁平化 UI 设计就是：界面被设计成扁的平的，并且无立体感的。仅仅是这些吗?有这些就够了吗?</p>
								<img src="http://www.ablanxue.com/autoupload/201710/15080267484375977.jpg" height="400px" />
								<p>如果 UI 界面使用了拟物化的风格，那么意味着人们对产品使用的学习成本大大降低，老少皆会用，因为界面看起来跟生活实物一模一样，看到界面中拟物风格的按钮，你一定会有按下去的欲望。如果是“扁平”的按钮呢?抱歉，你一定会听到很多抱怨：啊，原来这个还能点?在继续阅读本文之前，请先欣赏一张拟物风格的 UI 设计图：</p>
								<img src="http://www.ablanxue.com/autoupload/201710/15080267502025262.jpg" alt="" />
								<p>这个界面很明显是用户在注册时会见到的，左侧有一个信封样子的输入框，并且右侧有一个“注册”的按钮，当你输完邮箱账号并点击注册以后你会发现，这信封被塞了进去，塞到哪里去呢?一定是网站当中了，而且注册完又马上显示 Hello, Alex )) 以表示对用户的欢迎。不得不对这种设计感到赞叹，实在太精妙了，看到这个信封被投了进去，让人有一种被接受了的愉悦感，让人感觉到非常的自然，非常的舒适，马上就对这个网站产生好感。不是每个人都有丰富的电子产品的使用经历，所以，缺乏这些经历的人初次使用该产品的时候，就会更倾向于点击那些拟物化的按钮，因为，人生来如此，用手“按”得如此自然，如此舒心;而“扁平”的按钮则会让那些没有电子产品使用经历的老人或者儿童感到迷惑，这个能按吗?啊!原来这个还真能按!或许对于我们这些电子产品熟客来说，这个按钮可以点已经是常识之中的事了，但是过度扁平的界面会让人感到疑惑，增加人的反应时间。因此，拟物化图标设计势在必行。</p>
								<p>那么扁平化呢?我们应该抛弃吗?请注意，在之前一段当中，我没有用到“扁平化”这三个字，而是用“扁平”二字代替。这有什么区别吗?…… 有的!“扁平”二字特指的是视觉上图标或者界面的扁平，像在张白纸上做设计一样，没有任何的立体感;而“扁平化”这三个字呢?这正是今天要讲的主题：扁平化是一种内在的设计思想。扁平化思想是一种让设计者在界面设计过程中减少信息层级的思想。</p>
								<img src="http://www.ablanxue.com/autoupload/201710/1508026753030418.jpg" />
								<p>怎么减少信息层级?直接把天气、时间、日期、电量等信息直接显示在图标上就是一种减少信息层级的方式，表面上这种做法是减轻用户的工作量，实质上这是对用户的一种关怀，而用户是能够感受到这种关怀的。进而用户给设计者带来的回报是：用户把这款产品推荐给更多的人，好的用户体验口口相传，最终你的用户会越来越多，从而你的收入也会越来越多。以上这个例子仅仅是减少信息层级的一种体现而已，其实还有更多。如 Windows 8 中的磁贴，它直接将所需展示的信息直接显示在磁贴上，这样我们可以不用点进去就可以看到一些重要的信息。</p>
								<img src="http://www.ablanxue.com/autoupload/201710/15080267559211248.png" height="400px" />
								<p>今后的 UI 设计方向将会更倾向于一种拟物化与扁平化相结合的设计风格。从外观上看，界面是拟物的，但是实际使用中可以感受到信息层级的减少，以及化繁为简带来的愉悦感。前几年苹果 iOS 的拟物设计风格，在业界引起轩然大波，各家纷纷效仿，于是有了当时拟物化的电子世界;而最近几年，微软 Windows 8 扁平化的设计风格，亦在业界引起不小的波动，Android 甚至 iOS 都开始效仿，于是有了现在扁平的界面风格;而在将来，亦不是拟物化的 UI 独霸天下，也不是扁平化的界面称霸武林，而是一种拟物化风格与扁平化思想相结合的 UI 设计笑傲江湖。</p>
								<!--<p>Lorem ipsum dolor sit amet. Integer gravida velit quis dolor tristiqumsan.anteposuerit litterarum formas humanitatis per seacula amet Integer gravida velit. </p>-->
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- //blog-pop-->
		<div class="footer" id="contact">
			<div class="container">
				<div class="service-head one text-center">
					<h4>联 系 我</h4>
					<h3>GET <span>IN TOUCH WITH ME</span></h3>
					<span class="border two"></span>
				</div>
				<div class="mail_us">
					<div class="col-md-6 mail_left">
						<div class="contact-grid1-left">
							<div class="contact-grid1-left1">
								<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
								<h4>邮  箱</h4>
								<ul>
									<li>Mail1:
										<a href="http://mail.qq.com">2417566928@qq.com</a>
									</li>
									<li>Mail2:
										<a href="http://mail.163.com/">13247597486@163.com</a>
									</li>
								</ul>
							</div>
						</div>
						<div class="contact-grid1-left">
							<div class="contact-grid1-left1">
								<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>
								<h4>联系电话</h4>
								<ul>
									<li>Phone: 13247597486</li>
									<li>Fax: +88888888</li>
								</ul>
							</div>
						</div>
						<div class="contact-grid1-left">
							<div class="contact-grid1-left1">
								<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
								<h4>地  址</h4>
								<ul>
									<li>地址: 广东省广州市黄埔区广州商学院信息技术与工程学院</li>
									<li>中国-广州</li>
								</ul>
							</div>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="col-md-6 mail_right">
						<form action="#" method="post">
							<input type="text" name="Name" value="名字" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Name';}" required="">
							<input type="email" name="Email" value="邮箱" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Email';}" required="">
							<input type="text" name="Mobile number" value="电话号码" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Mobile number';}" required="">
							<textarea name="Message..." onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = '来说些什么吧^.^...';}" required="">Message...</textarea>
							<input type="submit" value="发送">

						</form>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="copy_right text-center">
					<ul class="social-icons two">
						<li>
							<a href="#" class="weixin"> <img src="images/weixincode.jpg" alt="微信二维码" height="150px" width="150px" /></a>
						</li>
						<li>
							<a href="#" class="qq"> <img src="images/qqcode.jpg" alt="qq二维码" height="150px" width="150px" /></a>
						</li>
						<li>
							<a href="https://www.zhihu.com/people/cai-xiao-er-50-95/activities" target="_blank" class="zhihu"> </a>
						</li>
						<li>
							<a href="https://weibo.com/5880965090/" target="_blank" class="sina"> </a>
						</li>
					</ul>
					<p>&copy; 2017 Preface . All rights reserved</p>
				</div>
			</div>
		</div>
		<!-- //footer -->
		<!-- /container -->
		<div class="portfolio-modal modal fade slideanim" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-content port-modal">
				<div class="close-modal" data-dismiss="modal">
					<div class="lr">
						<div class="rl"></div>
					</div>
				</div>
				<div class="container">
					<div class="row">
						<div class="col-lg-8 col-lg-offset-2 text-center">
							<div class="modal-body">
								<img src="images/pic4.jpg" class="img-responsive img-centered" alt="">
								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="portfolio-modal modal fade slideanim" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-content port-modal">
				<div class="close-modal" data-dismiss="modal">
					<div class="lr">
						<div class="rl"></div>
					</div>
				</div>
				<div class="container">
					<div class="row">
						<div class="col-lg-8 col-lg-offset-2 text-center">
							<div class="modal-body">
								<img src="images/pic9.jpg" class="img-responsive img-centered" alt="">
								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="portfolio-modal modal fade slideanim" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-content port-modal">
				<div class="close-modal" data-dismiss="modal">
					<div class="lr">
						<div class="rl"></div>
					</div>
				</div>
				<div class="container">
					<div class="row">
						<div class="col-lg-8 col-lg-offset-2 text-center">
							<div class="modal-body">
								<img src="images/pic5.jpg" class="img-responsive img-centered" alt="">
								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="portfolio-modal modal fade slideanim" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-content port-modal">
				<div class="close-modal" data-dismiss="modal">
					<div class="lr">
						<div class="rl"></div>
					</div>
				</div>
				<div class="container">
					<div class="row">
						<div class="col-lg-8 col-lg-offset-2 text-center">
							<div class="modal-body">
								<img src="images/pic6.jpg" class="img-responsive img-centered" alt="">
								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="portfolio-modal modal fade slideanim" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-content port-modal">
				<div class="close-modal" data-dismiss="modal">
					<div class="lr">
						<div class="rl"></div>
					</div>
				</div>
				<div class="container">
					<div class="row">
						<div class="col-lg-8 col-lg-offset-2 text-center">
							<div class="modal-body">
								<img src="images/pic10.jpg" class="img-responsive img-centered" alt="">
								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="portfolio-modal modal fade slideanim" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-content port-modal">
				<div class="close-modal" data-dismiss="modal">
					<div class="lr">
						<div class="rl"></div>
					</div>
				</div>
				<div class="container">
					<div class="row">
						<div class="col-lg-8 col-lg-offset-2 text-center">
							<div class="modal-body">
								<img src="images/pic11.jpg" class="img-responsive img-centered" alt="">
								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="portfolio-modal modal fade slideanim" id="portfolioModal7" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-content port-modal">
				<div class="close-modal" data-dismiss="modal">
					<div class="lr">
						<div class="rl"></div>
					</div>
				</div>
				<div class="container">
					<div class="row">
						<div class="col-lg-8 col-lg-offset-2 text-center">
							<div class="modal-body">
								<img src="images/pic13.jpg" class="img-responsive img-centered" alt="">
								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="portfolio-modal modal fade slideanim" id="portfolioModal8" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-content port-modal">
				<div class="close-modal" data-dismiss="modal">
					<div class="lr">
						<div class="rl"></div>
					</div>
				</div>
				<div class="container">
					<div class="row">
						<div class="col-lg-8 col-lg-offset-2 text-center">
							<div class="modal-body">
								<img src="images/pic14.jpg" class="img-responsive img-centered" alt="">
								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="portfolio-modal modal fade slideanim" id="portfolioModal9" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-content port-modal">
				<div class="close-modal" data-dismiss="modal">
					<div class="lr">
						<div class="rl"></div>
					</div>
				</div>
				<div class="container">
					<div class="row">
						<div class="col-lg-8 col-lg-offset-2 text-center">
							<div class="modal-body">
								<img src="images/pic1.jpg" class="img-responsive img-centered" alt="">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<a href="#home" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
		<!--start-smooth-scrolling-->
		<script type="text/javascript">
			$(document).ready(function() {
				/*
										var defaults = {
								  			containerID: 'toTop', // fading element id
											containerHoverID: 'toTopHover', // fading element hover id
											scrollSpeed: 1200,
											easingType: 'linear' 
								 		};
										*/

				$().UItoTop({
					easingType: 'easeOutQuart'
				});
			});
		</script>
		<!--end-smooth-scrolling-->
		<!-- //for bootstrap working -->
		<script src="js/bootstrap.js"></script>
	</body>

</html>